সিএসএস৩-এর object-position প্রপার্টি একটি ইমেজ বা ভিডিওর মতো রিপ্লেসড কন্টেন্ট (replaced content) কিভাবে কন্টেইনারের মধ্যে প্রদর্শিত হবে তা নির্ধারণ করতে ব্যবহৃত হয়। যখন object-fit প্রপার্টি ব্যবহার করে কন্টেন্টকে স্কেল বা রিসাইজ করা হয়, তখন object-position ব্যবহার করে কন্টেন্টটি কন্টেইনারের মধ্যে সুনির্দিষ্টভাবে অবস্থান নির্ধারণ করা যায়।
যখন একটি ইমেজ বা ভিডিও কন্টেইনারের আকার অনুযায়ী object-fit ব্যবহার করে স্কেল হয়, তখন কন্টেন্টটি কখনো পুরোপুরি দৃশ্যমান নাও হতে পারে। object-position ব্যবহার করে নির্ধারণ করা যায়, কন্টেইনারের ভেতরে কন্টেন্টটি কোন অংশ ফোকাস বা দৃশ্যমান থাকবে। উদাহরণস্বরূপ, ইমেজের একটি নির্দিষ্ট অংশ প্রদর্শন করা।
object-position: value;
value-এর মধ্যে পজিশনের জন্য ভ্যালু দেওয়া হয়, যা হতে পারে:
top, bottom, left, right, center।50% 50%, যা কন্টেইনারের এক্স এবং ওয়াই অক্ষ বরাবর পজিশন নির্ধারণ করে।ডিফল্ট ভ্যালু হলো:
object-position: 50% 50%;
এটি ইমেজ বা ভিডিওর কেন্দ্রে পজিশন নির্ধারণ করে।
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 300px;
height: 200px;
object-fit: cover;
object-position: top left;
}
</style>
</head>
<body>
<img src="image.jpg" alt="Example Image">
</body>
</html>
ব্যাখ্যা:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 400px;
height: 250px;
object-fit: cover;
object-position: 20% 40%;
}
</style>
</head>
<body>
<img src="example.jpg" alt="Shifted Image">
</body>
</html>
ব্যাখ্যা:
| ভ্যালু | বর্ণনা |
|---|---|
| center | কন্টেন্টের কেন্দ্রস্থলে রাখে। |
| top | কন্টেন্টের উপরিভাগে রাখে। |
| bottom | কন্টেন্টের নিচের দিকে রাখে। |
| left | কন্টেন্টের বাম দিকে রাখে। |
| right | কন্টেন্টের ডান দিকে রাখে। |
| % বা px ভ্যালু | এক্স এবং ওয়াই অক্ষ বরাবর নির্দিষ্ট অবস্থান। |
object-position শুধুমাত্র রিপ্লেসড কন্টেন্ট যেমন ইমেজ বা ভিডিওর জন্য প্রযোজ্য। অপরদিকে, background-position ব্যাকগ্রাউন্ড ইমেজের পজিশন নিয়ন্ত্রণ করতে ব্যবহৃত হয়।
/* object-position */
img {
object-position: center;
object-fit: cover;
}
/* background-position */
div {
background-image: url('background.jpg');
background-position: center;
background-size: cover;
}
object-position প্রপার্টি সিএসএস৩-এ কন্টেন্ট পজিশনিং সহজ এবং কার্যকর করে, বিশেষ করে স্কেল করা ইমেজ বা ভিডিওর ক্ষেত্রে। এটি সঠিক ফোকাস নির্ধারণে ডিজাইনারদের জন্য অপরিহার্য।
common.read_more
common.or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
